<template>
  <a-layout id="ant-layout">
    <a-layout-header class="ant-layout-header">
      <div class="flex-row-between">
        <div class="flex-row-center-row">
          <span class="title margin-left-16">{{ systemName }}</span>
        </div>
      </div>
    </a-layout-header>

    <a-layout>
      <a-layout-sider v-model:collapsed="collapsed" collapsible class="ant-layout-sider">
        <SideMenu></SideMenu>
      </a-layout-sider>
      <a-layout-content class="ant-layout-content"> <router-view /></a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import { systemName } from "@/config";
import SideMenu from "@/components/sideMenu";
import { ref, reactive, toRefs, computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default {
  name: "BackMainView",
  components: {
    SideMenu,
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const state = reactive({
      modalVisible: false,
      popVisible: false,
      mainDom: null,
    });

    const userData = computed(() => {
      return store.state.userData;
    });
    const returnHome = () => {
      router.push("/portal");
    };

    const handleCancel = () => {
      state.modalVisible = false;
    };

    const handleChange = () => {
      router.push("/login");
    };

    return {
      ...toRefs(state),
      collapsed: ref(false),
      userData,
      systemName,
      returnHome,
      handleChange,
      handleCancel,
    };
  },
};
</script>
<style lang="scss" scoped>
#ant-layout {
  height: 100%;
  .ant-layout-header {
    padding: 0 18px;
    color: white;
    .title {
      font-size: 20px;
    }
  }
  .ant-layout-sider {
  }
  .ant-layout-content {
    overflow: hidden;
  }
  .ant-layout-footer {
    // background: white;
  }
}
.PAC {
  .ant-popover-inner-content {
    padding: 0;
    ul {
      list-style-type: none;
      li {
        padding: 6px 24px;
      }
      li + li {
        border-top: 1px solid #f0f0f0;
      }
    }
  }
}
</style>
